<template>
	<view style="background-color: white;">
		<view class="container">
			<view class="header">
				未开通
			</view>
			<uni-grid class="main" :column="4" :showBorder="false">
				<uni-grid-item class="main-item" v-for="item in icons" :key="item.name">
					<view class="main-item-icon">
						<icon-svg :icon-class="item.icon"></icon-svg>
					</view>
					<view class="main-item-text">
						{{item.name}}
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				icons: [{
					name: '携程商旅',
					icon: 'xiecheng'
				},{
					name: '途牛商旅',
					icon: 'tuniu'
				},{
					name: '途家',
					icon: 'tujiaminsu'
				},{
					name: '滴滴企业出行',
					icon: 'didichuhang'
				},{
					name: '滴滴出行',
					icon: 'didi'
				},{
					name: '神州专车',
					icon: 'shenzhouzhuanche'
				},{
					name: '艺龙',
					icon: 'yilong'
				},{
					name: '华住酒店',
					icon: 'huazhujiudian'
				},{
					name: '携程机票',
					icon: 'feiji2'
				},{
					name: '携程酒店',
					icon: 'jiudian2'
				},{
					name: '携程火车票',
					icon: 'huochepiao'
				},{
					name: '首汽约车',
					icon: 'shouqi'
				},{
					name: '圆通速递',
					icon: 'tubiaozhizuomoban'
				},{
					name: '中兴酒店',
					icon: 'service-hotel-copy'
				},{
					name: '中兴机票',
					icon: 'jipiao'
				},{
					name: '云上火车票',
					icon: 'ziyuanleixing-huochepiao'
				} ]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx;
		color: $uni-text-color-grey;
	}

	.header {
		font-weight: 400;
		font-size: 30rpx;
		padding-left: 30rpx;
		color: #323232;
	}
	.main{
		margin-top: 40rpx;
	}
	.main-item{
		text-align: center;
	}
	.main-item-icon{
		font-size:60rpx;
	}
	.main-item-text{
		font-size: 15rpx;
		color: #323232;
	}
</style>
